<template>
  <nav>
    <div class="left" @click="changeAreaDialog(true)">
      <img src="../assets/logo.png" alt="" />
      <span>{{ this.$store.state.area.collegeName }}</span>
    </div>
    <ul class="midst">
      <li :class="{ li_acitve: this.$store.state.routePath == '/' }">
        <router-link to="/">首页</router-link>
      </li>
      <li :class="{ li_acitve: this.$store.state.routePath.startsWith('/post') }">
        <router-link to="/post">贴文</router-link>
      </li>
      <li :class="{
        li_acitve: this.$store.state.routePath.startsWith('/activity'),
      }">
        <router-link to="/activity">活动</router-link>
      </li>
      <li :class="{
        li_acitve: this.$store.state.routePath.startsWith('/survey'),
      }">
        <router-link to="/survey">问卷</router-link>
      </li>
      <li :class="{
        li_acitve: this.$store.state.routePath.startsWith('/notice'),
      }">
        <router-link to="/notice">公告</router-link>
      </li>
    </ul>
    <div class="right">
      <!-- <span class="search_span" @click="openSearch">
        <el-icon style="margin-right: 5px">
          <Search />
        </el-icon>搜索
      </span> -->
      <span class="user_span">
        <router-link to="/own">
          <img :class="{avatar:true,avatar_active:this.$store.state.routePath.startsWith('/own')}"  alt=""
          :src="this.user.userPicPath==null?require('@/assets/img/avatar.png'):this.user.userPicPath" />
        </router-link>
        <div class="down_user">
          <div class="down_user_content">
            <div style="display: flex; padding: 10px 20px;justify-content: space-between;">
              <div>
                <img class="down_user_avatar"  alt=""
                :src="this.user.userPicPath==null?require('@/assets/img/avatar.png'):this.user.userPicPath" />
              </div>
              <div style="width:100%;padding-left: 15px;">
                <strong>{{ user.nickname }}</strong><br />
                <small>说明</small>
              </div>
              <div>
                <el-button v-if="user.role=='分站管理员'||user.role=='总站管理员'" size="large" 
                @click="loginAdmin">后台管理</el-button>
              </div>
            </div>
            <!-- <small style="display:block;text-align:center;margin-bottom:10px">广西科技示范学院</small> -->
            <div class="down_user_logout" @click="logout">
              <el-icon>
                <CloseBold v-if="isLogin" />
                <Avatar v-if="!isLogin"/>
              </el-icon>
              {{ !isLogin?'登录':'退出登录' }}
            </div>
          </div>
        </div>
      </span>
    </div>
    <!-- <div class="down_user"></div> -->
  </nav>
</template>

<script>
import { useStore } from "vuex";

export default {
  name: "NavigationComponent",
  setup() {
    const store = useStore();
    return {
      store,
    };
  },
  props: {
    openSearchComponent: Function,
    changeAreaDialog:Function,
  },
  data() {
    return {
      user: { nickname: "请登录" },
      site:this.$store.state.area.areaName,
      isLogin:false,
    };
  },
  created() {
    this.store.dispatch("updateUser").then(() => {
      this.user = this.store.state.user;
      this.isLogin=this.$store.state.user.isLogin==undefined
    });
  },
  methods: {
    openSearch() {
      this.openSearchComponent();
    },
    logout(){
      if(this.user.nickname=='请登录'){
        window.location.replace("/login.html")
        return
      }
      this.$request.get('/oauth/logout').then(data=>{
        if(data.success){
          localStorage.removeItem('access_token')
          localStorage.removeItem('refresh_token')
          document.location.reload()
        }
        this.$ElMessage({
              message:data.msg,
              type: data.success?"success":'error',
            });
      })
    },
    loginAdmin(){
      window.open(document.location.origin+'/admin/admin.html')
    }
  },
};
</script>

<style scoped>
nav {
  height: 60px;
  position: fixed;
  width: 100%;
  padding: 0 10px;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid #cdd0d6;
  display: flex;
  backdrop-filter: saturate(180%) blur(6px);
  background: rgba(255, 255, 255, 0.9);
}

.left {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
}

.midst {
  width: 50%;
  display: flex;
  justify-content: space-around;
  height: 100%;
}

.right {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}

.left img {
  height: 50px;
  width: 50px;
}

.midst li {
  padding: 0 10px;
  font-size: 15px;
  color: var(--el-text-color-regular);
  cursor: pointer;
  line-height: 60px;
  user-select: none;
}

.midst li a {
  text-decoration: none;
  color: var(--el-text-color-regular);
}

.midst li.li_acitve {
  border-bottom: 3px solid var(--el-color-primary);
}

.midst li.li_acitve a {
  color: var(--el-color-primary);
}

.midst li:hover a {
  color: var(--el-color-primary);
}

.right .avatar {
  width: 45px;
  height: 45px;
  /*  */
  border-radius: 50%;
}
.right .avatar_active {
  border: 3px solid var(--el-color-primary);
}

.right .search_span {
  margin-right: 20px;
  background-color: var(--el-fill-color-light);
  padding: 5px 17px;
  line-height: 35px;
  cursor: pointer;
  font-size: 15px;
  user-select: none;
  border-radius: 25px;
}

.right .search_span:hover {
  color: var(--el-color-primary);
}

.down_user {
  position: fixed;
  top: 50px;
  right: 0;
  padding: 10px;
  width: 445px;
  /* height: 255px; */
  display: none;
}

.down_user_content {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: var(--el-box-shadow-lighter);
}

.user_span:hover .down_user {
  display: block;
}

.down_user_logout {
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-top: 1px solid var(--el-border-color);
}
.down_user_avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--el-color-primary);
}
.down_user_logout:hover {
  background-color: var(--el-fill-color);
}
</style>